﻿@model LogManager.ViewModels.Filter.EventDateFilterViewModel

@{
    Layout = "~/Views/Shared/_Layout.cshtml";
    ViewBag.Title = "Events Log Percentage";
    ViewBag.Breadcrumb = "Statistic > Events per Log Percentage";
}


<div id="filter-form" class="group">
    @using (Html.BeginForm())
    {
        <fieldset>
            <legend><h3>Date</h3></legend>        
            @Html.DisplayForModel()
        </fieldset>
        <br clear="all" />
        <div>
            <input id="showReport" type="submit" value="View Report" />
        </div>            
    }
</div>

<fieldset>
    <legend>Errors Chart</legend>
    <div id="chart" style="min-width: 800px; min-height: 600px;">
    </div>
</fieldset

@section AsideLeft{
    @Html.Partial("StatisticNavigation")
}


@section Foot {
<script src="@Url.Content("~/Scripts/highcharts.js")" type="text/javascript" ></script>
<script type="text/javascript">
var options, chart;
$(document).ready(function () {
    options = {
        chart: {
            renderTo: 'chart',
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false
        },
        title: {
            text: 'Events'
        },
        tooltip: {
            formatter: function () {
                return '<b>' + this.point.name + '</b>' + this.percentage.toPrecision(2) + ' %';
            }
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: true,
                    color: '#000000',
                    connectorColor: '#000000',
                    formatter: function () {
                        return '<b>' + this.point.name + '</b>: ' + this.percentage.toPrecision(2) + ' %';
                    }
                }
            }
        },
        series: [{
            type: 'pie',
            name: 'Events per Log Percentage',
            data: []
        }]
    };

    var dateFilter = { start: $('#Start').val(), end: $('#End').val() }

    //Get data with json
    $.getJSON('@(Url.Action("EventsPerLogPercentageData", "Statistic"))'+'?'+$.param(dateFilter), function (data) {
        $.each(data, function (logkey, log) {
            var log = [log.name, parseFloat(log.percentage)];
            options.series[0].data.push(log);
        });
        chart = new Highcharts.Chart(options);
    });
});   
</script>

}


